<script setup lang='ts'>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { 
  GetAlarmHandlingSuggestion, 
  CreateAlarmHandlingSuggestion, 
  UpdateAlarmHandlingSuggestion, 
  DeleteAlarmHandlingSuggestion
} from '@/api/publicApi'
import { isatty } from 'tty'
defineProps({
  num: {
    type: Number,
    default: 0
  }
})

// 分页
const pageInfo = reactive({
  total: 50,
  pageSize: 10,
  pageNum: 1
})

// 参数
const fromObj = reactive ({
  suggestion: '',
  id: '',
  SkipCount: 0,
  MaxResultCount: 10,
  HarborCode: '',
  CompanyCode: ''
})

// 处理意见列表
const proposalList:any = ref([ {} ])

// 数据源
const tableData: any = ref([])

// 是否新增
const isAdd = ref(true)
// 控制表单弹框
const formVisible = ref(false)
// 表单验证规则
const rules = {
  suggestion: [
    { required: true, message: '请输入意见', trigger: 'blur' }
  ]
}

// 定义函数
onMounted(() => {
  getHandlingOpinionsData()
})

const cellStyle = {
  textAlign: 'center'
}

const headStyle = {
  textAlign: 'center'
}

// 获取表格数据
const getHandlingOpinionsData = async () => {
  tableData.value = []
  proposalList.value = []
  fromObj.SkipCount = (pageInfo.pageNum - 1) * pageInfo.pageSize
  fromObj.MaxResultCount = pageInfo.pageSize
  let res = await GetAlarmHandlingSuggestion(fromObj)
  tableData.value = [ ...res.result.items ]
  pageInfo.total = res.result.totalCount
  console.log('处理意见页面接口信息---->', res)
}

// 展示弹框
const showFormDialog = (type:number,row?:any) => {
  console.log('按钮---->', type)
  if(!type) {
    isAdd.value = true
  } else {
    isAdd.value = false
  }
  formVisible.value = true
}

// 添加处理意见
const addSuggestion = async () => {
  let userInfo = localStorage.userInfo ? JSON.parse(localStorage.userInfo) : null
  fromObj.HarborCode = userInfo.harborCode
  fromObj.CompanyCode = userInfo.companyCode
  CreateAlarmHandlingSuggestion(fromObj).then(res => {
    if (res.success) {
      ElMessage({
        // message: `${res.message}`,
        message: '添加成功！',
        type: 'success'
      })
      getHandlingOpinionsData()
      formVisible.value = false
    } else {
      ElMessage({
        // message: `${res.message}`,
        message: '添加失败！',
        type: 'error'
      })
    }
  })
}
// 修改处理意见
const updateSuggestion = async() => {
  let res = await UpdateAlarmHandlingSuggestion({
    id: fromObj.id,
    suggestion: fromObj.suggestion
  })
  if (res.success) {
    ElMessage({
      // message: `${res.message}`,
      message: '修改成功！',
      type: 'success'
    })
    formVisible.value = false
    getHandlingOpinionsData()
  } else {
    ElMessage({
      // message: `${res.message}`,
      message: '修改失败！',
      type: 'error'
    })
  }
}
// 删除处理意见
const deleteItem = (row: any) => {
  ElMessageBox.confirm(
    '确定要删除该处理意见?',
    '删除确认',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  )
    .then( async () => {
      let res = await DeleteAlarmHandlingSuggestion({
        id: row.id + '',
        SensorType: row.sensorType
      })
      if(res.success) {
        ElMessage({
          type: 'success',
          message: '删除成功!'
        })
      } else {
        ElMessage({
          type: 'error',
          message: '删除失败!'
        })
      }
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除'
      })
    })
}

// 确定
const determine = () => {
  if(isAdd.value) {
    addSuggestion()
  } else {
    updateSuggestion()
  }
}

// 取消
const cancellation = () => {
  formVisible.value = false
}

// 关闭弹框时候
const closeDialog = () => {
  fromObj.suggestion = ''
}

// 改变每页数量
const handlePlanSizeChange = (val: number) => {
  pageInfo.pageSize = val
  getHandlingOpinionsData()
}
// 切换页码
const handlePlanCurrentChange = (val: number) => {
  pageInfo.pageNum = val
  getHandlingOpinionsData()
}

// 向外暴露的函数与变量
defineExpose({
  getHandlingOpinionsData
})
</script>

<template>
  <div class="table-box">
    <el-table
      :cell-style="cellStyle"
      :header-cell-style="headStyle"
      :data="tableData"
      max-height="640"
      size="small"
    >
      <el-table-column
        prop="suggestion"
        label="处理意见"
      />
      <el-table-column
        prop="address"
        label="操作"
      >
        <template #default="scope">
          <div class="table-btn-box">
            <div
              class="update-btn"
              @click="showFormDialog(1, scope.row)"
            >
              编辑
            </div>
            <div
              class="delete-btn"
              @click="deleteItem(scope.row)"
            >
              删除
            </div>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <div class="pagination-box">
    <el-pagination
      v-model:current-page="pageInfo.pageNum"
      v-model:page-size="pageInfo.pageSize"
      :page-sizes="[5, 10, 15, 20]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageInfo.total"
      @size-change="handlePlanSizeChange"
      @current-change="handlePlanCurrentChange"
    />
  </div>
  <el-dialog
    v-model="formVisible"
    width="30%"
    :close-on-click-modal="false"
    :title="isAdd ? '添加信息' : '修改信息'"
    @close="closeDialog"
  >
    <el-form
      :model="fromObj"
      :rules="rules"
      label-width="80px"
    >
      <el-form-item label="处理意见">
        <el-input
          v-model="fromObj.suggestion"
          type="textarea"
          :rows="4"
          placeholder="请输入内容"
          autocomplete="off"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="form-btn-box">
        <el-button @click="cancellation">
          取 消
        </el-button>
        <el-button @click="determine">
          确 定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped lang=scss>
.table-box {
  padding: 0 15px;
}

.table-btn-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;

  >div {
    width: 56px;
    height: 28px;
    color: #fff;
    border-radius: 5px;

    /* background-color: red; */

    &:hover {
      cursor: pointer;
    }
  }

  .resetting-btn {
    width: 92px;
    height: 28px;
    margin-left: 10px;
    background-color: #a6a9ad;
  }

  .update-btn {
    background-color: #e6a23c;
  }

  .delete-btn {
    margin-left: 10px;
    background-color: #f56c6c;
  }
}

.btn-box {
  width: 100%;
  height: 40px;
  margin-bottom: 10px;
  padding-left: 20px;

  >div {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 140px;
    height: 100%;
  }
}

.form-btn-box {
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 10px 15px;
}

.pagination-box {
  margin-top: 10px;
  padding: 0 15px;
}
</style>